<!--
使用说明：
1、必须设置容器高度
2、数据加载完后必须刷新this.scroll.refresh();
3、数据多一般都需要开启pullUpLoad
-->

<template>
  <div class="wrapper" ref="wrapper">
    <div class="content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
// 插件
import BScroll from "better-scroll";
export default {
  data() {
    return {
      scroll: null,
      // scrollY: 0,
      closure: null,
    };
  },
  props: {
    probeType: {
      type: Number,
      default: 0,
    },
    pullUpLoad: {
      type: Boolean,
      default: false,
    },
  },
  created() {},
  mounted() {
    this.initScroll();
  },
  updated() {
    // this.$refs.scroll.scroll.refresh();
  },
  methods: {
    // 回到顶部
    scrollTo(x, y, time = 300) {
      this.scroll.scrollTo(x, y, time);
    },
    // 初始化scroll对象
    initScroll() {
      // 创建scroll对象;
      this.scroll = new BScroll(".wrapper", {
        // movable: true,
        // zoom: true,
        click: true,
        probeType: this.probeType,
        pullUpLoad: this.pullUpLoad,
      });
      // 监听scroll滚动
      this.scroll.on("scroll", (res) => {
        this.$emit("scrollOn", res.y);
      });
      // 监听到底部
      if (this.pullUpLoad) {
        this.scroll.on("pullingUp", () => {
          console.log("到底部");
          this.$emit("pullingUp");
          // 初始化监听到底部
          this.scroll.finishPullUp();
          this.scroll.refresh();
        });
      }
    },
  },
};
</script>

<style lang='less' scoped>
// .content {
//   height: 300px;
//   overflow: hidden;
// }
// #app,
// #home,
// .wrapper {
//   height: 100% !important;
// }
</style>
